﻿{% extends "base.html" %}

{% block scripts %}
    <script src="/media/js/jquery.timers.js"></script>

    <script type="text/javascript">
        $(document).everyTime(4000, function(i) {
            $.get('/check_new_messages/{{ me.id }}/{{ usr.id }}/', function(res) {
                if ($(".list_item:last").length>0)
                {
                    $(".list_item:last").after(res);
                }
                else
                {
                    $(".dialog_mess_list").append(res);

                }

            });
        });
    </script>

{% endblock %}

{% block content %}
    <h1>Диалоги</h1>

    <ul class="tabs_list dialog_tabs">
        <li class="item item_current"><a href="/dialog/{{ usr.username }}">{{ usr.user_info.first_name }} {{ usr.user_info.last_name }}</a>
        <span class="bg"></span></li>
        <li class="item"><a href="/all_dialogs/">Все диалоги</a><span class="bg"></span></li>
    </ul>

    <ul class="dialog_mess_list">
        {% for message in message_list %}
        <li class="list_item{% if forloop.first %} list_item_first{% endif %}">
            <div class="author">
                <a href="/profile/{{ message.sender.id }}/">
                <img class="userpic"
                     {% if message.sender.user_info.avatar %}
                        src="{{ message.sender.user_info.avatar.url }}"
                        {% if message.sender.user_info.avatar.width > message.sender.user_info.avatar.height %}
                        width="44" 
                        {% else %}
                        height="49"
                        {% endif %}
                     {% else %}
                        src="/media/images/nophoto.jpg/" width="44" height="49"   {% endif %}
                />
                </a>
            </div>
            <div class="date">{{ message.sent_at|date:"DATETIME_FORMAT" }}</div>
            <div class="text">{{ message.body|linebreaksbr }}</div>

            <!--
            <ul class="options">
                <li class="item"><a href="#">Ответить</a></li>
                <li class="item"><a href="#">Удалить</a></li>
            </ul>
            -->
            
        </li>
        {% endfor %}
    </ul>
    <div class="add_dialog_mess">
        <form action="/messages/compose/{{ usr.username }}/" method="post">
            <img class="userpic_from"
                     {% if me.user_info.avatar %}
                        src="{{ me.user_info.avatar.url }}"
                        {% if me.user_info.avatar.width > me.user_info.avatar.height %}
                        width="44"
                        {% else %}
                        height="49"
                        {% endif %}
                     {% else %}
                        src="/media/images/nophoto.jpg/"
                        width="44" height="49"
                     {% endif %}
            />
            <input type="hidden" name="recipient" id="id_recipient" value="{{ usr.username }}"/>
            <input type="hidden" name="subject" id="id_subject" value="{{ usr.username }}"/>
            <textarea name="body" id="id_body" cols="50" rows="2" ></textarea>
            <img class="userpic_to"
                  {% if usr.user_info.avatar %}
                        src="{{ usr.user_info.avatar.url }}"
                        {% if usr.user_info.avatar.width > usr.user_info.avatar.height %}
                        width="44"
                        {% else %}
                        height="49"
                        {% endif %}
                     {% else %}
                        src="/media/images/nophoto.jpg/"
                        width="44" height="49"
                     {% endif %}
            />

            <input class="button" type="button" id="id_send_message" value="Отправить">
            
        </form>
    </div>

{% endblock %}